聊基金，不如聊聊基金那些设计

过去的一周，基金应该算是热门话题中的顶流。微信里各种设计群、校友群、带货群、滑雪群都充斥着一片财富缩水的哀嚎。

每逢这个时候，大家也就开始顺势讨论起各种基金投资APP好不好用的问题。

今天抽点时间，聊聊招商银行、蚂蚁财富、天天基金这三家APP的基金详情页设计。

基金产品的详情页大体是围绕一只基金的概况、盘中行情、历史数据、持仓情况、基金经理介绍、基金档案、交易规则等一级模块，来“客观包装”这只基金。

一级模块的信息下包含了众多层次级信息，各家APP对于同一个次级信息，是否曝光在详情页的一级模块里，都有着独立的思考，这在很大程度上决定着信息分发和触达的效率。

为什么要强调“客观包装”，因为无论你看到与否，信息都在那里，而信息曝光的顺序却直接影响到用户对基金的认知。

就好像我们了解一个人，如果只是看他的穿搭、气质、体态，可能会觉得这是一个艺术家。

但你若先把眼睛蒙上，听他讲量化策略、深度学习，你发现这人居然是个技术男！

比如我们挑一只基金，来看看它在三个APP的详情页里，分别长啥样。

01/ 招商银行

总体观感舒适，没有信息密度过高导致的视觉焦躁感。用色非常克制，留白空间较多。段落式结构清晰，文本层级和对比度清晰，便于信息检索，但分段式布局有点old fashion。

基金概况：在日内涨跌幅和最新净值基础上，补充了近1年收益率，可能是考虑到进入该详情页以后，行情模块会默认定位到“成立以来收益率”（其他会普遍定位到近1年收益率），可能是给投资者建立“基金需要长线投资”的心理预期。

信任力背书：白底通栏形式与整体UI规范相融，完全被淹没在页面里，不易被识别。应当在视觉表现层有所凸显。

数据看板：这是基金详情里最重要的模块之一，值得注意的是，业绩走势&净值估算、业绩排名&历史回测这在别家往往会分成两个模块。

这两个模块里有信息重叠交叉，比如近1月~近1年的收益情况在折线图和列表里都能看到，与同类基金的相对位置关系也能可视化，但列表更具有量化结果的优势，因而更受到专业投资者的青睐。

而招行根据历史收益、净值、盘中估算3个维度整合成了一个模块。一个模块的优势是折线图和列表数据可以联动观察。只不过默认配置的三行数据有点少，查看更多就得跳转。

招行这个模块令人诟病的点在于，一是收益走势里缺了近6个月的维度，二是折线图采用了曲线，且线宽过粗，导致不能像折现那样直观地反映出时间颗粒度，得手动长按触发对应交易日的明细。

基金诊断：招行自有的一套评估体系，内置有业绩回测、夏普比率、最大回撤、基金经理任期评估等信息，相对更专业。而详情页一级模块里展示的这个4个定性维度，怎么看都有点偏小白。

基金持仓：这是最重要的模块之二，如果把基金比作一道菜，这就是菜谱。跟做菜一样，对每一道食材的烹调和火候把控决定了最终呈现出的风味。

基金重仓股的盘中行情对于基金经理而言，就是每一道食材在制作中的状态，可以帮助经验投资者了解基金的布局在当下的市场状况，以便做出决策。

而限于银行体系内无法接入证券交易所数据，招行在基金持仓这块的盘中行情是空缺的，只能显示持仓占比和市值估算。对于老手来说，难免是个缺憾。

基金经理介绍：这一块在布局结构上有点bug，按常理“现任经理”和“刘某某”属于从属关系，所以标题栏右侧放置“历任经理”并且用两端封闭式分割线就不太合理。

招行估计是考虑到没有配置现任经理的详情，又不想浪费标题右侧的空间，才作此设计。

其他相关：这部分包含的基金公司、基金档案、交易规则属于并列关系，理应出现的分割线却没有体现，虽不影响投资者使用但反映出UI组件规范缺乏一定逻辑性。

交易规则：在购买时间点缺少了T日（交易日）收盘时间（15:00前）提示和周历提示。页面空间是富余的，完全可以将信息曝光提高投资者的时间感知度，而不是跳转二级页面才能了解详情。

02/ 天天基金

功能模块十分丰富，cover了关于一只基金的所有直接和间接描述。直接的包含了概况、行情、历史回测、持仓、经理介绍等内容，间接的包含了问答、讨论、资讯、公告等内容。

在产品的广度与深度方面，天天基金选择了把广度拉宽，将很多二级内容拍平，嵌入到一级页面中，可以说非常适合经验型投资者，但随之而来的劣势也十分明显 - 页面过长。

非常直观，天天的基金页面长度是招行（或蚂蚁）的两倍不止。

有了上面招行基金详情页的大致结构做支撑，这里就不把天天基金的页面逐个模块拆解分析了，我们挑一些有意思的来说。

基金概况：跟随涨跌变化的红/绿页头，这是天天最具标志性的设计之一，个人对此保留意见，这么大面积绿色在过去的一周，实在是令人焦虑。

净值行情/历史数据：天天基金在净值模块单列出了“单位净值”和“累计净值”的走势图，还直接标明了不同时段区间内的最高最低值。（“累计净值”是基金自成立之日起至今的净值表现，“单位净值”是基金运作期间扣除分红和份额拆分影响之后的净值表现。）

听说这是区分老基民和新人小白最直接的一道坎，当然作为一个UX设计师，我也就掺这一句，毕竟资格还远远够不上老基民。

非常贴心的一点是，天天在这添加了定投该产品的收益可视化。根据历史收益率回测和不同定投算法，进行一段时间内的收益率估算。与此类似设计的产品还有涨乐财富通。

特色数据：这也是经验投资者非常重视的三个指标。波动率反映收益率波动的程度，越小越好；夏普比率指基金每承受一点风险能够获得多少超额收益，越高越好；最大回撤指基金净值从最高到最低的降幅，越小越好。

基金持仓：这又是一个老基民的福利专区。上面分析过招行基金持仓tab的优势，而天天直接把带有重仓股盘中行情的持仓列表、资产/行业分布饼图直接嵌入到一级页面里，虽然默认只显示前五只重仓股，但对于了解相关板块行情也很有帮助。

这一模块的二级页面也支持投资者切换时间去观察基金经理每一季度的调仓风格。其实我个人更倾向于直接把十大重仓股行情全都放进来，默认折叠需要时展开。毕竟调仓不是个高频动作，我不会需要频繁地跳进二级页面去观察调仓。

基金经理：作为后台烹饪的cook，这块的简介过于“简洁”了。其实次一级的经理详情页里有非常详实的背景概述和任期间业绩回报评估，完全可以精选一些标签化的内容在一级模块里完善包装。

社交化：然后比较有意思的就是“社区”概念。天天基金上每只基金都分别有两个“bar”，一个问答吧一个贴吧，贴吧包含了问答吧。

这里能体现出天天对于细分场景的重视。贴吧里的话题天南海北，吐槽的、围观的、提问的、表态的、发小作文的、晒收益/亏损的，啥都有。

天天的产品经理还是为提问用户单独开辟了一片净土，让内容的传播与触达更加高效。

回到UI层面，天天基金页面的文本内容在逻辑结构上比较复杂，但视觉上没有将不同层级的对比度拉开，导致文本信息过于平均，不利于重点信息的快速检索。

03/ 蚂蚁财富

蚂蚁的基金详情页遵循整体UI风格采用了卡片式布局，信息架构更清楚。与前两个案例中的文本信息相比，设计质感好了不少。

页头的蓝色背景标志着蚂蚁集团的品牌基因，强化投资者对品牌的感知力度。且开辟了一个入口支持基金公司财富号里关于产品的宣导视频。

财富号视频：视频可以展开和收起。产品还给它配置了观看人次，侧面为该基金公司和旗下基金产品做热度营销。

基金概况：除了基金相关的基本信息以外，模块内展示了晨星评级和关注人气。既有客观权威评估体系，也有用户层的氛围烘托，通过两层信任力建设占领用户心智。

信任力背书：“支付宝金选”是由支付宝理财智库、中国证券报联合推出的一套理财产品评估体系，背后有一些专家KOL背书。能够筛选出部分历史业绩表现优异、基金经理业绩突出的产品。

相比于前几个信任力的营造，这一点的重要性和优先级远远胜出。因此在视觉层面也用黑金配色体现出权威性和尊享感。

能够很明显地察觉到互金平台和金融机构在产品包装上的玩法不同：互金平台倾向于权威背书和人气营销，金融机构倾向于指标构建和数据展示。

行情/数据：这一模块增加了一个可以手动关闭的tag，是关于“风险回报比率”的描述，一个听上去类似“夏普比率”的指标。优势在于蚂蚁直接量化转译了指标的结果——“好于同类98%基金”，省去了投资者分析指标的过程。

基金经理介绍：关于这部分，虽然在基金经理介绍的二级详情页里，天天基金比蚂蚁财富要详实得多，但一级模块里蚂蚁的人物包装还是更到位。“金牛奖得主”和学历/从业背景简述能直观地提高产品在用户侧的信任力。

持仓行情：这可以说是该页面视觉创新的重头戏。蚂蚁财富由于相关个股数据缺失，并不能像招行和天天基金那样横向比对每个季度基金经理的调仓动作，对于经验投资者研判这只基金来说，少了一个观察维度。

而视觉层面的创新则显得十分取巧，原本枯燥的个股行情列表被转译为可视化的矩阵，矩形的大小和底色能直接映射该股票的持仓占比和实时行情。并且横向滑动的组件也支持在不跳转的情况下完整显示10只重仓股。

对于持有或长期关注这只基金的用户而言，除非你要分析调仓，否则是不需要频繁进入二级页面查看持仓明细的。

以及细致到小数点后两位的持仓占比，意义也不大，了解大致的配比关系即可。蚂蚁这个可视化组件在带来新颖视觉观感的同时，也解决了这一问题。

▁

结语

对于产品而言，信息架构往往是最容易有争议的部分。而金融产品的信息深度和业务复杂度尤为明显，与之俱来的必然是各平台在架构策略上百花齐放。

篇幅有点长，望各位见谅。时间原因没有放更多的产品进行比对，像京东金融、涨乐财富通等APP的基金详情页也都各有千秋。

希望本篇对热衷于基金投资的朋友，或刚好也在互金行业做UX的朋友，带来一点参考价值。欢迎在评论区留下你的想法。

关注公众号，后台回复“样机素材”

获取全套iPhone 12系列高质量样机模板

往期精选